import React from 'react';

import {StyleSheet, View, Text, Image} from 'react-native';

import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

import Task from './pages/task';
import Leaderboard from './pages/leaderboard';
import EcoTree from './pages/ecotree';
import Porfolio from './pages/porfolio';

function App() {
  return (
    <NavigationContainer
    
    screenOptions={({ route }) => ({
      tabBarIcon: ({ focused, color, size }) => {
        let iconName;

        if (route.name === 'Task') {
          iconName = focused
            ? 'Task'
            : 'TaskActive';
        } else if (route.name === 'Leaderboard') {
          iconName = focused ? 'Leaderboard' : 'LeaderboardActive';
        }else if(route.name==='EcoTree'){
          iconName = focused ? 'EcoTree' : 'EcoTreeActive';
        }else if(route.name==='Porfolio'){
          iconName = focused ? 'Porfolio' : 'PorfolioActive';
        }

        return <Image source={require(`./assets/${iconName}.png`)} />;
      },
    })}
    >
      <Tab.Navigator>
        <Tab.Screen
          name="Task"
          component={Task}
        />
        <Tab.Screen
          name="Leaderboard"
          component={Leaderboard}
        
        />
        <Tab.Screen
          name="EcoTree"
          component={EcoTree}
         
        />
        <Tab.Screen
          name="Porfolio"
          component={Porfolio}
         
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default App;
